<script setup lang="ts">
import { reactive, toRaw, ref,watch } from "vue";
import TablePage from "./type/TablePage";
import deviceTree from "@/components/deviceTree/deviceTree.vue";

const obj = reactive(new TablePage());
const state = toRaw(obj).baseData;
const { count, isOpen, userInfo, baseData, router, handleHome, handleChange } =
  toRaw(obj);
const detail = () => {
  // console.log(obj);
  console.log(userInfo);
};


const countNum = reactive({ count: 0 })
watch(
  () => countNum.count,
  (count, prevCount) => {
    /* ... */
    console.log('count',count);
    console.log('prevCount',prevCount);
    
  }
)
</script>

<template>
  <div>
    <h2>这是表格页面</h2>
    <el-button type="primary" @click="handleHome">去首页</el-button>
    <el-button type="danger" @click="detail">查看详情信息</el-button>
    <el-button type="danger" @click="obj.openDialog">打开弹窗</el-button>
    <div class="checked">
      <el-checkbox v-model="state.checked1" label="Option 1" size="large" />
      <el-checkbox v-model="state.checked2" label="Option 2" size="large" />
    </div>

    <div class="input-box">
      <el-input
        v-model="state.input"
        placeholder="请输入"
        clearable
        maxlength="10"
        show-word-limit
      />
      <el-input
        v-model="state.input"
        placeholder="请输入密码"
        clearable
        show-password
      />
      <el-input
        type="textarea"
        v-model="state.textarea"
        placeholder="请输入内容"
      />
      <el-input v-model="state.input" placeholder="Please input">
        <template #prepend>Http://</template>
      </el-input>
    </div>
    <div>
      <el-input-number
        v-model="state.num"
        :min="1"
        :max="10"
        @change="handleChange"
      />
    </div>
    <div class="tree">
      <el-dialog
        v-model="obj.isShowDial"
        title="Warning"
        width="420px"
        align-center
      >
        <deviceTree></deviceTree>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.input-box {
  width: 500px;
}
// :deep(.el-input) {
//   margin-top: 20px;
// }
:deep(.el-textarea) {
  margin-top: 20px;
}
</style>
